import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";

// 下方引入的组件需要使用webpack进行打包，是需要进行优化处理的。默认会打成一个包，体积会比较大。
// 参考官方文档：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E4%BD%BF%E7%94%A8-webpack 其中的进阶-路由懒加载型
// import Login from '@/views/login/index.vue' 写不写vue拓展名是医院
// import Login from '@/views/login/index'
// import Layout from '@/views/layout/index'
import Home from "@/views/home/index";
import Role from "@/views/role/index";
import Menu from "@/views/menu/index";
import Resource from "@/views/resource/index";
import User from "@/views/user/index";
import Advert from "@/views/advert/index";
import ErrorPage from "@/views/error-page/index";

const Login = () =>
  import(/* webpackChunkName: "login" */ "@/views/login/index");

// 将VueRouter作为插件进行使用 使用Vue.use(xxx)
Vue.use(VueRouter);

// 路由规则
const routes = [
  // 定义路由规则。
  {
    path: "/login",
    name: "login",
    // 登录使用的组件，需要在上方引入。
    component: Login,
  },
  {
    path: "/error",
    name: "error",
    // 登录使用的组件，需要在上方引入。
    component: ErrorPage,
  },
  {
    // 登录完毕后的状态。layoyt,其他的路由作为layout的子路由。
    path: "/",
    component: () =>
      import(/* webpackChunkName: "layout" */ "@/views/layout/index"),
    // 设置子路由。
    meta: {
      requiresAuth: true,
    },
    children: [
      {
        path: "",
        name: "home",
        component: () =>
          import(/* webpackChunkName: 'home' */ "@/views/home/index"),
      },
      {
        path: "/home",
        name: "home",
        component: Home,
      },
      {
        path: "/role",
        name: "role",
        component: Role,
      },
      {
        path: "/menu",
        name: "menu",
        component: Menu,
      },
      {
        path: "/resource",
        name: 'resource',
        component: Resource,
      },
      {
        path: "/user",
        name: "user",
        component: User,
      },
      {
        path: "/advert",
        name: "advert",
        component: Advert,
      },
      {
        path: "/menu/create",
        name: 'menu-create',
        component: () =>
        import(/* webpackChunkName: 'menu-create' */ "@/views/menu/create"),
      },
      {
        path: "/menu/:id/edit",
        name: 'menu-edit',
        component: () =>
        import(/* webpackChunkName: 'menu-edit' */ "@/views/menu/edit"),
      },

      {
        path: "/resource/create",
        name: 'resource-create',
        component: () =>
        import(/* webpackChunkName: 'resource-create' */ "@/views/resource/create"),
      },

      {
        path: "/resource/:id/edit",
        name: 'resource-edit',
        component: () =>
        import(/* webpackChunkName: 'resource-edit' */ "@/views/resource/edit"),
      },

      {
        path: '/role/:roleId/alloc-menu',
        name: 'alloc-menu',
        component: () => import(/* webpackChunkName: 'alloc-menu' */'@/views/role/alloc-menu'),
        // 路径传参进行解耦。
        props: true
      },

      {
        path: "*",
        component: ErrorPage,
      },
    ],
  },
];

// 创建VueRouter实例
const router = new VueRouter({
  routes,
});

// 满足相对于的规则才进一步处理
router.beforeEach((to, from, next) => {
  console.log(to, from);
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    console.log("当前页面需要权限认证！");
    // 验证信息存储在vuex中，需要验证登录用户信息是否存在。
    if (!store.state.user) {
      return next({
       name: 'login',
       query: {
        // 将本次路由的fullpath传递到login页面。该自定义的字段会拼接到访问的url上
        redirect: to.fullPath,
       },
      })
    } else {
      next();
    }
  }else{
    next();
  }
});

// router.beforeEach((to, from) => {
//   // 而不是去检查每条路由记录
//   // to.matched.some(record => record.meta.requiresAuth)
//   if (to.meta.requiresAuth && !auth.isLoggedIn()) {
//     // 此路由需要授权，请检查是否已登录
//     // 如果没有，则重定向到登录页面
//     return {
//       path: '/login',
//       // 保存我们所在的位置，以便以后再来
//       query: { redirect: to.fullPath },
//     }
//   }
// })

export default router;
